import React, { useState } from 'react';
import style from './Stylebeautification.module.css';
import { Button, Drawer, Input, Modal } from 'antd';
import Cai from '../../pages/cai/car'
import Moneycapability from '../../pages/Moneycapability/Moneycapability'

function Stylebeautification({ onDelete,img }) { // 接收删除和剪裁函数作为参数
  const [open, setOpen] = useState(false);
  const [open1, setOpen1] = useState(false);
  const [isCommentModalVisible, setIsCommentModalVisible] = useState(false);
  const [isShareModalVisible, setIsShareModalVisible] = useState(false);
  const [comment, setComment] = useState('');
  const [commentsList, setCommentsList] = useState([]);
  const [editingIndex, setEditingIndex] = useState(null); // 用于保存正在编辑的评论索引
  const [editingComment, setEditingComment] = useState(''); // 用于保存正在编辑的评论内容

  const showDrawer = () => setOpen(true);
  const onClose = () => setOpen(false);

  const showDrawer1 = () => setOpen1(true);
  const onClose1 = () => setOpen1(false);

  const showCommentModal = () => setIsCommentModalVisible(true);
  const handleCommentOk = () => {
    if (comment) {
      setCommentsList([...commentsList, { text: comment, replies: [] }]);
      setComment('');
    }
    setIsCommentModalVisible(false);
  };
  const handleCommentCancel = () => setIsCommentModalVisible(false);

  const handleDeleteComment = (index) => {
    const updatedComments = commentsList.filter((_, i) => i !== index);
    setCommentsList(updatedComments);
  };

  const handleEditComment = (index) => {
    setEditingIndex(index);
    setEditingComment(commentsList[index].text);
  };

  const handleSaveEdit = () => {
    const updatedComments = [...commentsList];
    updatedComments[editingIndex].text = editingComment;
    setCommentsList(updatedComments);
    setEditingIndex(null);
    setEditingComment('');
  };

  const handleReplyOk = (index, reply) => {
    if (reply) {
      const updatedComments = [...commentsList];
      updatedComments[index].replies.push(reply);
      setCommentsList(updatedComments);
    }
  };

  const showShareModal = () => {
    setIsShareModalVisible(true);
  };

  const handleShareOk = () => {
    setIsShareModalVisible(false);
  };

  const handleCopyLink = () => {
    const url = window.location.href; // 获取当前页面链接
    navigator.clipboard.writeText(url).then(() => {
      message.success('链接已复制到剪贴板!');
    }).catch(() => {
      message.error('复制链接失败!');
    });
  };

  const currentUrl = window.location.href; // 当前页面链接

  return (
    <div className={style.Stylebeautification}>
      <ul className={style.StylebeautificationUl}>
        <li>AI美化</li>
        <li>
          <span onClick={showDrawer}>剪裁</span>
          <Drawer title="剪裁" onClose={onClose} open={open}>
            <Cai img={img} />
          </Drawer>
        </li>
        <li>样式</li>
        <li>
          <span onClick={showDrawer1}>抠图</span>
          <Drawer title="抠图" onClose={onClose1} open={open1}>
            <Moneycapability img={img} />
          </Drawer>
        </li>
        <li onClick={onDelete}>删除</li>
        <li onClick={showCommentModal}>评论</li>
        <li onClick={showShareModal}>分享</li>
      </ul>

      <Modal
        title="评论"
        visible={isCommentModalVisible}
        onOk={handleCommentOk}
        onCancel={handleCommentCancel}
      >
        <Input.TextArea
          value={comment}
          onChange={(e) => setComment(e.target.value)}
          placeholder="输入你的评论..."
        />
        <div style={{ marginTop: '16px' }}>
          <h3>评论列表</h3>
          <ul>
            {commentsList.map((cmt, index) => (
              <li key={index}>
                {editingIndex === index ? (
                  <>
                    <Input
                      value={editingComment}
                      onChange={(e) => setEditingComment(e.target.value)}
                    />0                                         
                    <Button type="primary" onClick={handleSaveEdit}>
                      保存
                    </Button>
                    <Button onClick={() => setEditingIndex(null)}>取消</Button>
                  </>
                ) : (
                  <>
                    {cmt.text}
                    <Button type="link" onClick={() => handleEditComment(index)}>编辑</Button>
                    <Button type="link" onClick={() => handleDeleteComment(index)}>删除</Button>
                    <div style={{ marginTop: '8px' }}>
                      <Input
                        placeholder="回复评论..."
                        onPressEnter={(e) => {
                          handleReplyOk(index, e.target.value);
                          e.target.value = ''; // 清空输入框
                        }}
                      />
                    </div>
                    <ul style={{ paddingLeft: '20px', marginTop: '8px' }}>
                      {cmt.replies.map((reply, replyIndex) => (
                        <li key={replyIndex}>{reply}</li>
                      ))}
                    </ul>
                  </>
                )}
              </li>
            ))}
          </ul>
        </div>
      </Modal>

      <Modal
        title="分享"
        visible={isShareModalVisible}
        onOk={handleShareOk}
        onCancel={handleShareOk}
      >
        <p>点击下方按钮复制当前页面链接:</p>
        <p>{currentUrl}</p> {/* 显示当前页面链接 */}
        <Button type="primary" onClick={handleCopyLink}>
          复制链接
        </Button>
      </Modal>


    </div>
  );
}

export default Stylebeautification;
